<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
{% load staticfiles %}

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="{% static '/js/jquery-3.3.1.js' %}"></script>
    <script type="text/javascript" src="{% static '/js/vue.js' %}"></script>
    {#    <script>jQuery.noConflict();</script>#}

</head>
<body>
<h1>{{ title }}</h1>
<div id="comment-container">
    {% for order_comment in order_comments %}
        <div class="comment">
            <p class="comment-item">
                {% ifnotequal order_comment.response_target -1 %}
                    回复 {{ order_comment.response_target }}楼:
                {% endifnotequal %}
                {{ order_comment.speaker }}: {{ order_comment.content }} #{{ order_comment.floor }}</p><br>
            <a href="#comment-form" v-on:click="readyToReply" id="{{ order_comment }}">回复</a>
            <br>
            <br>
        </div>
    {% endfor %}
</div>
<form method="post" id="comment-form">

    {% csrf_token %}
    <label for="comment">评论:</label>
    <input type="text" height="30" name="comment" id="comment">
    <input type="submit" value="submit">
</form>
<script>
    $(function () {
        $("#comment-form").submit(function () {
            var topic = "{{ title|safe }}";
            var comment = $("#comment").val();
            {#alert("enter the function 'comment-form.submit'");#}
            $.ajaxSetup(
                {
                    data: {csrfmiddlewaretoken: '{{ csrf_token }}'}
                }
            );
            console.log("newComment: " + comment + "\nresponse: " + commentContainer.tempResponse + "\ncommentNumber: " + (commentContainer.commentNumber + 1) + "\ntopic: " + topic);
            $.ajax({
                type: "post",
                dataType: "json",
                url: "/topic/{{ title|safe }}/",

                data: {
                    'newComment': comment.toString(),
                    'response': commentContainer.tempResponse.toString(),
                    'commentNumber': (commentContainer.commentNumber + 1).toString(),
                    'topic': topic.toString()
                },
                success: function (data) {
                    console.log("data: " + data);
                    $("#comment-container").append(
                        "<p class=\"comment-item\" id=>" + comment + "</p><br>"
                    );

                    commentContainer.commentNumber += 1;
                    return false;
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    /*弹出jqXHR对象的信息*/
                    console.log(jqXHR.responseText);
                    console.log(jqXHR.status);
                    console.log(jqXHR.readyState);
                    console.log(jqXHR.statusText);
                    /*弹出其他两个参数的信息*/
                    console.log(textStatus);
                    console.log(errorThrown);

                    return false;
                }
            });
            return false;
        });
    });

    var commentContainer = new Vue({
        el: "#comment-container",
        data: {
            tempResponse: -1,
            commentNumber: {{ order_comments.count|safe }}
        },
        methods: {
            scrollToEnd: function () {

            },
            readyToReply: function () {
                console.log(this.id);
                commentContainer.tempResponse = this.id;
                commentContainer.commentNumber += 1;
            },
            commentFormSubmit: function () {

            }
        }
    })
</script>

</body>
</html>